<template>
	<div>
		<div class="ques-opt-title">
			<i class="star" v-if="dataVal?.attribute?.required"></i>
			<i>{{ index + 1 }}、</i>
			<div contenteditable="true" @keydown="preventEnter" @blur="dataChange($event, dataVal, 'title')">{{ dataVal.title }}</div>
			<div class="ques-opt-title-ope">
				<span @click="$emit('remove', dataVal)" class="delete">✖</span>
				<span class="move">☝</span>
				<input type="checkbox" v-model="isRequired" />
			</div>
		</div>
		<div class="ques-opt-body">
			<div class="ques-opt-item">
				<div contenteditable="true" v-html="tmpContent[dataVal.id]" @blur="contentChange" :data-id="dataVal.id" @click="setMouseRange" @keydown="handleKeyDown" @mouseup="updateSelection"></div>
				<div class="ques-opt-label-ope"> </div>
			</div>
			<div class="ques-opt-add">
				<span @click="addOption"> ✚ 添加选项 </span>
			</div>
		</div>
	</div>
</template>

<script>
import common from "./common.js";
export default {
	mixins: [common],
	data() {
		return { range: null, target: null, tmpContent: {} };
	},
	methods: {
		setMouseRange(e) {
			this.target = e.target;
			this.updateSelection();
		},
		handleKeyDown(e) {
			// 检查是否是方向键（左、上、右、下）
			if ([37, 38, 39, 40].includes(e.keyCode)) {
				// 使用 setTimeout 确保在浏览器处理完按键事件后获取最新的光标位置
				this.$nextTick(() => {
					this.updateSelection();
				});
			}
		},

		updateSelection() {
			const selection = window.getSelection();
			if (selection.rangeCount > 0) {
				//因为按下鼠标后，光标的移动也是需要时间的，这里设置延迟300ms，以避免，使用方向键移动光标时，获取的定位点是上一个
				setTimeout(() => {
					this.range = selection.getRangeAt(0);
				}, 300);
				let target = selection.anchorNode;

				// 如果选择的是文本节点，获取其父元素
				if (target.nodeType === Node.TEXT_NODE) {
					target = target.parentElement;
				}

				// 确保 target 是元素节点并且向上查找 contenteditable 容器
				while (target && target.nodeType === Node.ELEMENT_NODE && !target.hasAttribute("contenteditable")) {
					target = target.parentElement;
				}

				this.target = target;
			}
		},
		updateText(e) {
			//获取光标位置
			this.range = window.getSelection().getRangeAt(0);
			//获取光标所在的元素
			const target = e.target;
			//获取光标所在的元素的id
			const id = target.getAttribute("data-id");
			//获取光标所在的元素的内容
			const content = target.innerHTML;
			//更新数据
			this.dataVal.attribute.content = content;
			//定义children的目的就是为了今后可能会进行输入数据的数据校验，处理attribute，以实现数据校验的扩展
			this.dataVal.children = this.dataVal?.children ?? {};
			this.dataVal.children.push({ id: id, attribute: {} });
			console.log("updateText", this.dataVal);
		},
		addOption() {
			if (this.range && this.target) {
				//计算光标在ques-opt-item中的位置
				//在光标出插入一个占位符
				// const placeholder = `<span data-id="${this.ids.get()}" contenteditable="false">____________</span>`;
				//将placeholder插入到光标位置
				//创建一个span元素
				const span = document.createElement("span");
				const id = this.tool.ids.get();
				//设置span的data-id属性
				span.setAttribute("data-id", id);
				//设置span的contenteditable属性
				span.setAttribute("contenteditable", "false");
				//设置span的内容
				span.innerHTML = "____________";
				//将span插入到光标位置
				this.range.deleteContents(); // 删除选中的内容
				this.range.insertNode(span);

				// 创建一个新的 Range，将光标移动到 span 后面
				const newRange = this.range.cloneRange();
				newRange.setStartAfter(span);
				window.getSelection().removeAllRanges();
				// 设置光标位置到 span 后面
				window.getSelection().addRange(newRange);
				// 设置焦点到 contenteditable 容器
				this.target.focus();
				// 更新 this.range 为新的 Range
				this.range = newRange;
			}
		},
		contentChange(v) {
			console.log("contentChange", v.target.innerHTML);
			this.dataVal.attribute.content = v.target.innerHTML;
		}
	},
	mounted() {
		this.tmpContent[this.dataVal.id] = this.dataVal?.attribute?.content ?? "";
	}
};
</script>
